<div width="<{$gwidth}>%" border="0" cellpadding="0" cellspacing="0" class='grid clearfix' id="gallery-grild-list">
  <{if count($products) > 0}>
  <{assign var=gallery_col_limit value=$env.conf.b2c.gallery.display.grid.colnum}>
  <ul>
    <{foreach from=$products key=key item=product name=goods}>
    <{assign var=gallery_display value=(($smarty.foreach.goods.iteration)%$gallery_col_limit)}>
    <li class="items-gallery <{$mask_webslice}> itemsList" product="<{$product.goods_id}>">
    <div class="goodpic" style='<{if $image_set.S.width}> width:<{$image_set.S.width}>px;position:relative; margin:0 auto;height:<{$image_set.S.height}>px;<{/if}>'>
      <{if $product.tags}>
      <{foreach from=$product.tags item=tags}>
      <{assign var="tagImage" value=$tags.params.tag_image}>
      <{if $tagImage}>
      <div style="margin: 0pt auto">
        <div class="goods-tip" style="filter:alpha(opacity=<{$tags.params.tag_opacity}>);position:absolute">
          <img src="<{$tagImage|storager:'s'}>" style="opacity:<{$tags.params.tag_opacity/100}>;filter:alpha(opacity=<{$tags.params.tag_opacity}>);" pos = "<{$tags.params.pic_loc}>"/>
        </div>
      </div>
      <{/if}>
      <{/foreach}>
      <{/if}>
      <a target="_blank" href='<{link app=b2c ctl=site_product act=index arg=$product.goods_id}>'  style='<{if $image_set.S.width}> width:<{$image_set.S.width}>px;display: table-cell; vertical-align: middle; text-align: center; margin:0 auto;*font-size:<{$image_set.S.height*0.875}>px;height:<{$image_set.S.height}>px;<{/if}>'>
        <{if $product.udfimg == 'true'}>
        <{assign var="gimage" value=$product.thumbnail_pic}>
        <{else}>
        <{assign var="gimage" value=$product.image_default_id|default:$defaultImage}>
        <{/if}>
        <{img src="transparent.gif" app="b2c" lazyload=$gimage|storager:'s' class="img-lazyload"  alt=$product.name|escape:html}>
      </a>
    </div>
    <div class="goods-main">
    <div class="goodinfo">
      <h6>
        <a href="<{link app=b2c ctl=site_product act=index arg=$product.goods_id}>" title="<{$product.name|escape:html}>" class="entry-title"><{$product.name|escape:"html"}></a>
        <{if $product.tags}>
        <{foreach from=$product.tags item=tags}>
        <{if $tags.params.tag_showOnIndex}>
        &nbsp;<span style="color:<{$tags.tag_fgcolor}>;background:<{$tags.tag_bgcolor}>"><{$tags.tag_name}></span>
        <{/if}>
        <{/foreach}>
        <{/if}>
      </h6>
      </div>
      <div class="price-wrap">
       <ul class="price-item">
      <li>
         <span class="sell-t">销售价:</span>
         <em class="sell-price"><{$product.price|cur_odr}></em>
      </li>
      <{if $product.timebuyprice}>
       <li>
         <span class="rush-t">抢购价: </span>
         <em class="rush-price"><{$product.timebuyprice|cur_odr}></em>
       </li>
      <{/if}>
      <li><{if $product.mktprice && $setting.mktprice eq true}><del>市场价<{$product.mktprice|cur_odr}></del><{else}>&nbsp;<{/if}></li>
      </ul>
      <ul class="button clearfix">
        <{goodsmenu product=$product setting=$setting login=$login zindex=$zindex--}>
        <li class="btncmp" title="商品对比">
        <a href="javascript:void(0)" rel="_gcomp_" data-gcomp="{gid:'<{$product.goods_id}>',gname:'<{$product.name|addslashes|escape:html}>',gtype:'<{$product.type_id}>',url:'<{link app=b2c ctl=site_product act=index arg=$product.goods_id}>'}" class="btncmp" title="<{t}>商品对比<{/t}>">
        </a>
        </li>
      </ul>
      </div>
    </div>
    </li>
    <{/foreach}>
  <{*if !$gallery_display*}>
  </ul>
  <{*/if*}>
  <{/if}>
</div>

<script>
  /*AUTO HEIGHT*/
  window.addEvent('domready',function(){

    var items  = $$('#gallery-grild-list .items-gallery h6')||[];
    var prices = $$('#gallery-grild-list .items-gallery ul.price-item') || [];
    if(!items)return;
    var i = 0;
    var rowitems=[];
    var priceitems=[];
    items.each(function(item,idx){
        rowitems[i] = rowitems[i]||[];
        priceitems[i] = priceitems[i]||[];
        rowitems[i].push(item);
        priceitems[i].push(prices[idx]);
        if((idx+1)%4==1){item.getParent('.items-gallery').addClass('row-first');}
        if((idx+1)%4==0){i++;item.getParent('.items-gallery').addClass('row-last');};
    });

    rowitems.each(function(items){
      new AutoSize(items,'height');
    });
    priceitems.each(function(items){
      new AutoSize(items,'height');
    });

    var getAmongPos = function(size,to){
      var elpSize = $(to).getSize(),elpScroll = $(to).getScroll();
      return {
        'top':Math.abs((elpSize.y/2).toInt()-(size.height/2).toInt()+to.getPosition().y+elpScroll.y),
        'left':Math.abs((elpSize.x/2).toInt()-(size.width/2).toInt()+to.getPosition().x+elpScroll.x)
      };
    };

    Ex_Event_Group['_zoomImg_']={fn:function(el,e){
      e.stop();
      if(el.retrieve('active'))return;
      el.store('active',true);
      var tpic = el.getParent('.goods-main').getPrevious('.goodpic').getElement('img');
      var bpic_src = el.get('pic');
      var loading = new Element('div',{
        styles:{'background':'#fff url(<{$env.app.res_url}>/loading.gif) no-repeat 50% 50%',
          'width':40,
          'height':40,
          'border':'1px #e9e9e9 solid',
          'opacity':.5}}).inject(document.body).amongTo(tpic);

      new Asset.image(bpic_src,{onload:function(img){
          loading.destroy();
          var winsize = window.getSize();
          var imgSize = $(img).zoomImg(winsize.x,winsize.y,1);
          if(!imgSize) return;
          var fxv = Object.append(getAmongPos(imgSize,window),imgSize);
          var imgFx = new Fx.Morph(img,{link:'cancel'});
          img.setStyles(Object.append(tpic.getCoordinates(),{opacity:0.5})).inject(document.body).addClass('img-zoom').addEvent('click',function(){
            imgFx.start(tpic.getCoordinates()).chain(function(){this.element.destroy();el.store('active',false);});
          });
          imgFx.start(Object.append(fxv,{opacity:1}));
          document.addEvent('click',function(){

            img.fireEvent('click');
            document.removeEvent('click',arguments.callee);

          });

          },onerror:function(){
            el.store('active',false);
            loading.destroy();
      }});
  }}
    /*
    *商品标签定位
    */
    var tips = $$('.goods-tip');

    //var opacity = tips.getElement('img').get('op')[0];

    //tips.getElement('img').setStyle('opacity',opacity);

    if(tips.length>0){

      var parSize = {
        x : tips.getParent('.goodpic')[0].getSize().x,
        y : tips.getParent('.goodpic')[0].getSize().y
      };


      var GoodsTipPos= {
        tl:{left:0,top:0},
        tc:{left:(parSize.x)/2 - 25,top:0},
        tr:{top:0,right:0},
        ml:{left:0,top:(parSize.y)/2 - 25},
        mc:{left:(parSize.x)/2 - 25,top:(parSize.y)/2 -25},
        mr:{top:(parSize.y)/2 - 25,right:0},
        bl:{bottom:0,left:0},
        bc:{bottom:0,left:(parSize.x)/2 - 25},
        br:{bottom:0,right:0}
      };


      /*.setStyles({
        'top':Pos.top,
        'left':Pos.left,
        'right':Pos.right,
        'bottom':Pos.bottom
      });
      */
      tips.each(function(v){
        v.getElement('img').zoomImg(50,50);

        var ImgSrc = v.getElement('img').get('src');
        var ImgStr = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ImgSrc+"')";

        if(Browser.ie6)
        v.getElement('img').setStyle('filter',ImgStr);

        var proPos = v.getElement('img').get('pos');

        var Pos = GoodsTipPos[proPos];

        //      if(Browser.ie6) {
          //     if(Pos.left === 0 && Pos.top===0)
          //         Pos.left -= v.getParent().getSize().x/2;
          //    };

        v.setStyles({
          'top':Pos.top,
          'left':Pos.left,
          'right':Pos.right,
          'bottom':Pos.bottom
        });
        //if(Browser.ie6) {
          //      if(Pos.left === 0 && Pos.top===0)
          //    Pos.left += v.getParent().getSize().x/2
          //};
      });
    }
  });


</script>
